<template>
  <a-modal v-model="tableHeaderVisible" title="表头显示" :maskClosable="false" @cancel="handleCancel">
    <div class="container" @dragover="ondragover" @drop="onDrop($event,'show')">
      <span class="item" v-for="(item,index) in topColumns" :key="item.id" :data-index="index" draggable @dragstart="onDrag($event,item,'show')">
        {{ item.title }}
        <i class="icon" @click="removeItem(item,index)">
          <svg t="1655967554501" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7442" width="16" height="16">
            <path d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" p-id="7443" fill="#8a8a8a"></path>
          </svg>
        </i>
      </span>
    </div>
    <a-divider class="separator">拖至上方显示,拖至下方不显示</a-divider>
    <div class="container" @dragover="ondragover" @drop="onDrop($event,'hidden')">
      <span class="item" v-for="(item,index) in bottomColums" :key="item.id" :data-index="index" draggable @dragstart="onDrag($event,item,'hidden')">
        {{ item.title }}
        <i class="icon" @click="addItem(item,index)">
          <svg t="1655967593603" class="icon" viewBox="0 0 1024 1024" vessrsion="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7791" width="16" height="16">
            <path d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z" p-id="7792" fill="#8a8a8a"></path>
            <path d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z" p-id="7793" fill="#8a8a8a"></path>
          </svg>
        </i>
      </span>
    </div>
    <template slot="footer">
      <div class="footer">
        <div class="setting">
          <span @click="addAllColumn" v-if="resetShow">显示全部</span>
          <span @click="hiddenAllColumn" v-else>隐藏全部</span>
          <span @click="resetColumn">重置</span>
        </div>
        <div class="button">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button key="submit" type="primary" @click="handleOk">
            确定
          </a-button>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'CTableHeader',
  props: {
    // 展示的 column
    showColumns: {
      type: Array,
      default () {
        return []
      }
    },
    // 隐藏的 column
    hiddenColumns: {
      type: Array,
      default () {
        return []
      }
    },
    showColumnIds: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      tableHeaderVisible: false,
      topColumns: [],
      bottomColums: []
    }
  },
  computed: {
    resetShow () {
      return this.topColumns.length === 0
    }
  },
  methods: {
    initData () {
      const columns = [...cloneDeep(this.hiddenColumns), ...cloneDeep(this.showColumns)]
      // 赋值 ID 进行定位
      columns.forEach(column => {
        const result = this.showColumnIds.some(item => item === column.id)
        if (result) {
          this.topColumns.push(column)
        } else {
          this.bottomColums.push(column)
        }
      })
    },
    show () {
      this.initData()
      this.tableHeaderVisible = true
    },
    handleCancel (e) {
      this.resetData()
      this.tableHeaderVisible = false
    },
    handleOk () {
      this.$emit('update:showColumnIds', this.topColumns.map(e => e.id))
      this.$emit('update:showColumns', this.topColumns)
      this.$emit('update:hiddenColumns', this.bottomColums)
      this.resetData()
      this.tableHeaderVisible = false
    },
    resetData () {
      this.topColumns = []
      this.bottomColums = []
    },
    removeItem (item, index) {
      this.topColumns.splice(index, 1)
      this.bottomColums.push(item)
    },
    addItem (item, index) {
      this.bottomColums.splice(index, 1)
      this.topColumns.push(item)
    },
    resetColumn () {
      this.resetData()
      this.initData()
    },
    addAllColumn () {
      this.topColumns.push(...this.bottomColums)
      this.bottomColums = []
    },
    hiddenAllColumn () {
      this.bottomColums.push(...this.topColumns)
      this.topColumns = []
    },
    onDrag (evet, item, type) {
      const dataTransfer = evet.dataTransfer
      dataTransfer.setData('item', JSON.stringify(item))
      dataTransfer.setData('moveType', type)
    },
    ondragover (evet) {
      evet.preventDefault()
    },
    onDrop (evet, type) {
      const index = evet.target.dataset.index
      const dataTransfer = evet.dataTransfer
      const item = JSON.parse(dataTransfer.getData('item'))
      const moveType = dataTransfer.getData('moveType')
      // 跨行拖动
      if (type !== moveType) {
        if (type === 'hidden') {
          if (index) {
            this.bottomColums.splice(index, 0, item)
          } else {
            this.bottomColums.push(item)
          }
          this.topColumns = this.topColumns.filter(topColumn => topColumn.id !== item.id)
        } else if (type === 'show') {
          if (index) {
            this.topColumns.splice(index, 0, item)
          } else {
            this.topColumns.push(item)
          }
          this.bottomColums = this.bottomColums.filter(bottomColum => bottomColum.id !== item.id)
        }
      } else {
        // 同行移动
        if (type === 'hidden') {
          this.bottomColums = this.bottomColums.filter(bottomColum => bottomColum.id !== item.id)
          this.bottomColums.splice(index, 0, item)
        } else if (type === 'show') {
          this.topColumns = this.topColumns.filter(topColumn => topColumn.id !== item.id)
          this.topColumns.splice(index, 0, item)
        }
      }
    }
  }
}
</script>

<style scoped>
>>> .ant-modal-title {
  text-align: left;
}
>>> .ant-modal-header {
  border-bottom: none;
}
>>> .ant-modal-body {
  padding: 0 24px;
}
>>> .ant-modal-footer {
  border-top: none;
}
>>> .ant-divider-inner-text {
  font-size: 14px;
  color: #9e9ea0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  min-height: 30px;
}
.container .item {
  padding: 8px;
  margin: 5px;
  background-color: #f3f3f3;
  border-radius: 5px;
  user-select: none;

  transition: all 0.3s ease-in;
}
.container .item:hover {
  background-color: #ccc;
  color: #fff;
  transform: translateY(-3px);
}
.container .item .icon {
  position: relative;
  top: 2px;
  cursor: pointer;
}
.separator {
  font-size: 12px;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.footer .setting {
  /* width: 90px; */
  height: 32px;
  line-height: 32px;
}
.footer .setting span {
  margin-right: 15px;
  color: #0358fb;
  cursor: pointer;
}
</style>
